<template>
  <view class="lottery-container" :style="{backgroundImage:'url('+info.background+')'}">
	<u-toast ref="uToast"></u-toast>
	<view class="lottery-wrap">
		<view class="lottery-expend">
			<view class="lottery-expend-rule" @tap="showRule = true">活动规则</view>
			<view class="lottery-expend-service" @tap="goServicePage()">客服</view>
			<view class="lottery-expend-download">
				<view class="lottery-expend-download-float" @tap="goDownloadPage()">下载APP</view>
			</view>
		</view>
		<view class="lottery-lucky-wrap" v-if="show">
			<LuckyGrid ref="myLucky"
			  :buttons="info.config.buttons"
			  :blocks="info.config.blocks"
			  :activeStyle="info.config.activeStyle"
			  :defaultStyle="info.config.defaultStyle"
			  :defaultConfig="info.config.defaultConfig"
			  :prizes="info.config.prizes"
			  @start="startCallBack"
			  @end="endCallBack" />
			  <view class="lottery-lucky-bounce">
				  <text class="letter">免</text>
				  <text class="letter">费</text>
				  <text class="letter">抽</text>
				  <text class="letter">奖</text>
				  <text class="letter">-</text>
				  <text class="letter">剩</text>
				  <text class="letter">余</text>
				  <text class="letter">{{info.singleLimit}}次</text>
			  </view>
		</view>
	</view>
	<view class="lottery-footer">
		<rich-text v-if="info.expandOne" :nodes="info.expandOne|formatRichText"></rich-text>
		<view>{{info.expandThree}}</view>
	</view>
	<view>
		<u-popup :show="showPrize" mode="center" bgColor="transparent">
			<view class="lottery-good-warp"> 
				<view class="lottery-good-title">{{info.expandFour}}</view>
				<view class="lottery-good-top-img">
					<image class="lottery-good-one-img" src="/static/imgs/gxhd.png"></image>
					<image @click="closeClick" class="lottery-good-two-img" src="/static/imgs/close.png"></image>
				</view>
				<view class="lottery-good-img" :style="{background: 'url(' + currentPrize.openImg + ') no-repeat', backgroundSize:'100% 100%'}">
				</view>
				<view class="lottery-good-time">
					名额已锁定，请在 <text class="lottery-good-time-color">{{minutes}}</text> 分 
					<text class="lottery-good-time-color">{{seconds}}</text> 秒内完成支付
				</view>
				<view class="lottery-good-mobile">
					<input class="lottery-good-mobile-input" v-model="from.mobile" placeholder="请输入提货手机号"/>
					<view class="lottery-good-mobile-tip">
						<view>手机号填错</view>
						<view>将无法提货</view>
					</view>
				</view>
				<view class="lottery-good-pay" @tap="extract()">
					付款提货<text style="font-size: 30rpx;">（¥{{info.price}}）</text>
				</view>
				<view class="lottery-good-protocol">
					<image @click="protocol = true" :class="{'check':protocol,'checked':!protocol}" src="https://y-qiwan.obs.cn-north-4.myhuaweicloud.com/qwhz-h5/page/spread/img/spread1/check.png"></image>
					<image @click="protocol = false" :class="{'check':!protocol,'checked':protocol}" src="https://y-qiwan.obs.cn-north-4.myhuaweicloud.com/qwhz-h5/page/spread/img/spread1/checked.png"></image>
					<text style="font-size: 30rpx;">已阅读并同意</text><text style="font-size: 30rpx;">《用户隐私协议》</text>
				</view>
			</view>
		</u-popup>
		<u-modal :show="showRule"  :title="ruleTitle" @confirm="showRule = false">
			<view class="slot-content">
				<scroll-view  scroll-y="true" style="height: 500rpx;">
					<rich-text :nodes="info.ruleDesc"></rich-text>
				</scroll-view>
			</view>
		</u-modal>
	</view>
  </view>
</template>

<script>
  import {activityInfo,activityLottery,activityExtract} from '@/common/http.api.js'
  import utils from '@/utils/utils.js'
  import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
  export default {
    components: { LuckyGrid  },
    data () {
      return {
		count:4,
		index:null,
		show:false,
		showPrize:false,
		ruleTitle:'规则说明',
		showRule:false,
		protocol:true,
		code:'',
		info:{},
		minutes:10,
		seconds:0,
		timer:null,
		maxTime:10 * 60,
		currentPrize:{},
		from:{
			code:null,
			mobile:null,
		}
      }
    },
	onLoad(e){
		let that = this;
		if(utils.isNotEmpty(e.code)){
			this.code = e.code;
			this.getActivityInfo();
		} 
		that.timer = setInterval(()=>{
			that.countDown()
		}, 1000)
	},
	filters: {
		formatRichText (html) { //控制小程序中图片大小
			let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		}	
	},
    methods: {
		extract(){
			if(!this.protocol){
				this.$refs.uToast.show({
					message: res.msg,
					type: '请仔细阅读并同意用户隐私协议',
				})
			}
			if(utils.isEmpty(this.from.mobile)){
				this.$refs.uToast.show({
					message: res.msg,
					type: '手机号不能为空',
				})
			}
			activityExtract({params:{code:this.from.code,mobile:this.from.mobile}}).then(res => {
				if (res.code === 200) {
					if(res.data.payFlag){
						window.location.href = res.data.payUrl;
					}else{
						uni.navigateTo({
							url: '/pages/index/success?url=' + this.info.linkTwo
						});
					}
				} else {
					uni.hideLoading();
					this.$refs.uToast.show({
						message: res.msg,
						type: 'error',
					})
				}
			});
		},
		countDown() {
			if (this.maxTime >= 0) {
					this.minutes = Math.floor(this.maxTime / 60);
					this.seconds = Math.floor(this.maxTime % 60);
					--this.maxTime;
			} else{
				clearInterval(this.timer);
			}
	    },
	   goDownloadPage(){
		   window.location.href=this.info.linkTwo;
	   },
	   goServicePage(){
		   window.location.href=this.info.linkOne;
	   },
	   closeClick(){
		 this.showPrize = false;  
	   },
	   getActivityInfo(){
		   activityInfo({params:{code:this.code}}).then(res => {
			   debugger
				if (res.code === 200) {
					//console.info(JSON.parse(res.data));
					console.info(res.data);
					this.info = res.data;
					this.show = true;
				} else {
					uni.hideLoading();
					this.$refs.uToast.show({
						message: res.msg,
						type: 'error',
					})
				}
			});
	   },
      // 点击抽奖按钮触发回调
      startCallBack () {
		  debugger
		  if(this.count === 0){
			  this.$refs.uToast.show({
			  	message: '你的次数用完了，可下载APP查看更多活动!',
			  	type: 'error',
			  })
			  return;
		  }
		  // 开始游戏
		  this.$refs.myLucky.play()
		  // 使用定时器模拟接口
		  setTimeout(() => {
			activityLottery({params:{code:this.code}}).then(res => {
			   debugger
				if (res.code === 200) {
					this.index = res.data.index;
					this.from.code = res.data.code;
					this.info.singleLimit  = this.info.singleLimit - 1;
					// 结束游戏, 并抽第0号奖品
					this.$refs.myLucky.stop(this.index);
					this.currentPrize = res.data.prize;
					this.timer = setInterval(this.countDown(), 1000);   
				} else {
					uni.hideLoading();
					this.$refs.uToast.show({
						message: res.msg,
						type: 'error',
					})
				}
			});
		  }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
		this.showPrize = true;
      }
    }
  }
</script>
<style lang="scss">
	page {
	  height: 100%;
	  width: 100%;
	}
	uni-page-body {  
		height: 100vh;
		//width: 100%;
	}
	.ql-align-center{
		text-align: center;
	}
	.check,.checked{
		width: 50rpx;
		height: 50rpx;
	}
	
	.check {
		display: none;
	}
	/deep/ .u-popup__content{
		background-color: none;
	}
	.letter {
	  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
	  display: inline-block;
	  transform: translate3d(0, 0, 0);
	  margin-top: 30rpx;
	  text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
	  font-size:40rpx
	}
	.letter:nth-child(1) {
	  animation-delay: 0s;
	}
	.letter:nth-child(2) {
	  animation-delay: 0.0333333333s;
	}
	.letter:nth-child(3) {
	  animation-delay: 0.1333333333s;
	}
	.letter:nth-child(4) {
	  animation-delay: 0.2333333333s;
	}
	.letter:nth-child(5) {
	  animation-delay: 0.3333333333s;
	}
	.letter:nth-child(6) {
	  animation-delay: 0.4333333333s;
	}
	.letter:nth-child(7) {
	  animation-delay: 0.5333333333s;
	}
	.letter:nth-child(8) {
	  animation-delay: 0.6333333333s;
	}
	@keyframes bounce {
	  0% {
	    transform: translate3d(0, 0, 0);
	    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
	  }
	  100% {
	    transform: translate3d(0, -1em, 0);
	    text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
	  }
	}
	.lottery-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		//background-image: url(../../static/imgs/bg.png);
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		.lottery-wrap{
			.lottery-expend{
				position: absolute;
				top: 40rpx;
				right: 0;
				.lottery-expend-rule{
					background-color: #fed23f;
					border-radius: 10px 0 0 10px;
					padding: 6rpx;
					text-align: center;
					font-size: 10rpx;
					color: #E14622;
					margin-bottom: 20rpx;
				}
				.lottery-expend-service{
					background-color: #fed23f;
					border-radius: 10px 0 0 10px;
					padding: 6rpx;
					text-align: center;
					font-size: 10rpx;
					color: #E14622;
					margin-bottom: 20rpx;
				}
				.lottery-expend-download{
					position: absolute;
					right: 0;
					padding: 12rpx;
					background-color: #a3160e;
					border-radius: 10px 0 0 10px;
					color: #FFFFFF;
					.lottery-expend-download-float{
						writing-mode: vertical-rl;
						-webkit-writing-mode: vertical-rl;
						font-size: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
			.lottery-lucky-wrap{
				.lottery-lucky-bounce{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					white-space: nowrap;
				}
			}
		}
		.lottery-footer{
			position: fixed;
			bottom: 5px;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	.lottery-good-warp{
		background: url(https://y-qiwan.obs.cn-north-4.myhuaweicloud.com:443/qwhz-h5/page/spread/img/spread-20220530/tc/pop_tc.png) no-repeat;
		background-size: 100% 100%;
		height: 800rpx;
		width: 660rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.lottery-good-title{
			position: absolute;
			top: -40px;
			font-size: 12px;
			font-weight: 400;
			color: #F8F8F8;
			opacity: 0.6;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.lottery-good-one-img{
			position: absolute;
			top: -15px;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 187px;
			height: 20px;
		}
		.lottery-good-two-img{
			position: absolute;
			top: -40px;
			right: 0px;
			width: 32px;
			height: 32px;
		}
		.lottery-good-img{
			margin-top: 70px;
			width: 280px;
			height: 160px;
			position: relative;
			.lottery-good-img-tag{
				width: 90px;
				height: 90px;
				position: absolute;
				top: 0px;
				right: 0px;
			}
		}
		.lottery-good-time{
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 20rpx 0;
			text-align: center;
			.lottery-good-time-color{
				color: #FFED29;
			}
		}
		.lottery-good-mobile{
			width: 480rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 10px;
			display: flex;
			align-items: center;
			overflow: hidden;
			justify-content: space-between;
			padding: 0 20rpx;
			.lottery-good-mobile-input{
				flex: 3;
			}
			.lottery-good-mobile-tip{
				font-size: 20rpx;
				font-weight: 400;
				color: #F45920;
			}
		}
		.lottery-good-pay{
			width: 540rpx;
			height: 90rpx;
			background: url(https://y-qiwan.obs.cn-north-4.myhuaweicloud.com:443/qwhz-h5/page/spread/img/spread-20220530/tc/tc_btn.png) no-repeat;
			background-size: 100% 100%;
			margin: 10rpx;
			font-size: 40rpx;
			font-weight: 600;
			color: #E14622;
			text-align: center;
			line-height: 80rpx;
		}
		.lottery-good-protocol{
			margin-top: 5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 10rpx;
			color: #BB9450;
		}
	}
</style>